<template>
  <div id="app">
    <select v-model="lang">
      <option value="chinese">中文</option>
      <option value="en">English</option>
      <option value="pt">Português</option>
      <option value="de">Deutsch</option>
      <option value="pl">Polski</option>
      <option value="ru">Русский</option>
    </select>

    <select v-model="activeClass">
      <option selected value="yellow">yellow</option>
      <option value="red">red</option>
      <option value="blue">blue</option>
    </select>
    &emsp;
    <label for="">
      显示年份选择器
      <input type="checkbox" v-model="showYearSelector" />
    </label>
    &emsp;
    <button @click="addWeekendCurrentYear">添加当前年度的所有周六日</button>
    <button @click="removeWeekendCurrentYear">删除当前年度的所有周六日</button>
    <!-- 以下功能有问题 -->

    <label>
      隐藏周六
      <input type="checkbox" v-model="hideWeekend" />
    </label>
    &emsp;
    <label>
      隐藏周天
      <input type="checkbox" v-model="hideSunday" />
    </label>
    <button @click="yyy">查看</button>
    <year-calendar
      v-model="year"
      :activeDates.sync="activeDates"
      @toggleDate="toggleDate"
      :lang="lang"
      prefixClass="customized_wrapper_class"
      :activeClass="activeClass"
      :showYearSelector="showYearSelector"
      :hideWeekend="hideWeekend"
      :hideSunday="hideSunday"
      @monthClick="monthClicked"
    ></year-calendar>
  </div>
</template>

<script>
/**
 * 模型简化 弹窗
 * @description
 * @property {Boolean}        visible         显示弹窗
 * @property {String}         title           标题
 * @property {String|Number}  width           弹窗宽度(默认'363px')
 * @property {String|Number}  height          弹窗高度(默认auto)
 * @event    {Function}       cancel          关闭弹窗触发，当前组件为右上角x号
 */
import YearCalendar from "./components/calendar/YearCalendar.vue";
import dayjs from "dayjs";

export default {
  name: "calendarIndex",
  components: {
    YearCalendar,
  },
  data() {
    return {
      lang: "chinese", // 'en', 'chinese', 'pt', 'ru'
      year: this.doHandleDate(),
      activeDates: [],
      activeClass: "yellow",
      showYearSelector: true,
      hideWeekend: false,
      hideSunday: false,
    };
  },

  methods: {
    doHandleDate() {
      const myDate = new Date();
      const tYear = myDate.getFullYear();
      return tYear
    },
    yyy() {
      console.log(this.activeDates,1111111);
    },
    toggleDate(dateInfo) {
      console.log(dateInfo);
    },
    // 添加当前年度的周末
    addWeekendCurrentYear() {
      let data = [];
      // 获取当前 年份
      // const year = new Date().getFullYear()
      const year = this.year;
      // 每年12个月
      for (let index = 0; index < 12; index++) {
        // 获取这个月的最后一天是几号
        const endDate = new Date(year, index + 1, 0).getDate();
        // 判断今天是否是周六/周日
        const day = new Date(
          `${year}-${String(index + 1).padStart(2, 0)}-01`
        ).getDay();
        if (day === 0) {
          data.push(`${year}-${String(index + 1).padStart(2, 0)}-01`);
          let whileLoop = true;

          // 加6是因为要获取星期六
          let sun = 1 + 6;
          while (whileLoop) {
            data.push(
              `${year}-${String(index + 1).padStart(2, 0)}-${String(
                sun
              ).padStart(2, 0)}`
            );
            // 判断是否小于等于这个月的最后一天，如果下个月的一号是星期六或星期天则不用管下次循环会自动导入
            if (sun + 1 <= endDate) {
              data.push(
                `${year}-${String(index + 1).padStart(2, 0)}-${String(
                  sun + 1
                ).padStart(2, 0)}`
              );
              // 此处很重要别忘了加
              sun += 1;
            }
            // 重新获取下一次等星期六
            sun += 6;
            // 判断大于当前月最后一天时停止
            if (sun > endDate) {
              whileLoop = false;
            }
          }
        } else if (day === 6) {
          data.push(`${year}-${String(index + 1).padStart(2, 0)}-01`);
          data.push(`${year}-${String(index + 1).padStart(2, 0)}-02`);
          let whileLoop = true;
          let sun = 2 + 6;
          while (whileLoop) {
            data.push(
              `${year}-${String(index + 1).padStart(2, 0)}-${String(
                sun
              ).padStart(2, 0)}`
            );
            if (sun + 1 <= endDate) {
              data.push(
                `${year}-${String(index + 1).padStart(2, 0)}-${String(
                  sun + 1
                ).padStart(2, 0)}`
              );
              sun += 1;
            }
            sun += 6;
            if (sun > endDate) {
              whileLoop = false;
            }
          }
        } else {
          // 计算差几天是周六
          const j = 6 - day;
          data.push(
            `${year}-${String(index + 1).padStart(2, 0)}-${String(
              1 + j
            ).padStart(2, 0)}`
          );
          data.push(
            `${year}-${String(index + 1).padStart(2, 0)}-${String(
              1 + j + 1
            ).padStart(2, 0)}`
          );

          let whileLoop = true;
          let sun = 1 + j + 1 + 6;
          while (whileLoop) {
            data.push(
              `${year}-${String(index + 1).padStart(2, 0)}-${String(
                sun
              ).padStart(2, 0)}`
            );
            if (sun + 1 <= endDate) {
              data.push(
                `${year}-${String(index + 1).padStart(2, 0)}-${String(
                  sun + 1
                ).padStart(2, 0)}`
              );
              sun += 1;
            }
            sun += 6;
            if (sun > endDate) {
              whileLoop = false;
            }
          }
        }
      }
      this.activeDates = [...this.activeDates,...data];
    },
    // 移除本年的周末
    removeWeekendCurrentYear() {
      this.activeDates = this.activeDates.filter((oDate) => {
        const date = typeof oDate === "string" ? oDate : oDate.date;
        const day = dayjs(date).day();
        const isCurrentYear = dayjs(date).year() === this.year;
        const isWeekend = [6, 0].includes(day);
        return !(isCurrentYear && isWeekend);
      });
    },
    monthClicked(monthYearInfo) {
      console.log(monthYearInfo);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  padding: 60px;
  background-color: #eaeaea;
}

.customized_wrapper_class {
  background-color: pink;
  color: white;
  ::v-deep &.red {
    background-color: #a00;
    color: white;
    // &:after {
    //   background-image: url("./components/calendar/assets/baseline-remove_circle-24px.svg");
    //   background-size: 100% 100%;
    // }
  }
  ::v-deep &.blue {
    background-color: #0000aa;
    color: white;
  }
  ::v-deep &.yellow {
    background-color: yellow;
    color: black;
  }
}
</style>
